<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在线面试-应聘者端</title>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/docs.css">
    <link rel="stylesheet" href="css/live/live.css"/>
    <link rel="stylesheet" href="js/tips/css/tips.css"/>
    <script>
        window.console = window.console || {
            log:function(){
                //alert(JSON.stringify(arguments))
            }
        }
    </script>
    <style>
        .btn-primary {
            outline: none;
            padding: 0 12px;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            vertical-align: bottom;
            color: #fff;
            background-color: #428bca;
            border-color: #357ebd;
            height: 24px;
        }

        .btn-primary:hover {
            background-color: #3276b1;
        }
    </style>
</head>
<body>
<div class="jumbotron">
    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <h2>
                    <small>在线列表</small>
                </h2>
                <div class="container" style="width: 100%;">
                    <div class="panel panel-default">
                        <div class="panel-body" id="logs" style="height: 440px;">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-6">
                <h2>
                    <small>视频窗口</small>
                </h2>
                <div class="container" style="width: 100%;">
                    <div class="panel panel-default" >
                        <div class="panel-body" style="height: 440px;">
                            <div id="liveMedia">
                                <h1>Alternative content</h1>
                                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.json-2.4.js"></script>
<script src="js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/flash-websocket/swfobject.js"></script>
<script type="text/javascript">
    // Set URL of your WebSocketMain.swf here:
    WEB_SOCKET_SWF_LOCATION = "js/flash-websocket/WebSocketMainInsecure.swf";
    // Set this to dump debug message from Flash to console.log:
    WEB_SOCKET_DEBUG = true;
    // 无论如何都使用flash 模式
    //WEB_SOCKET_FORCE_FLASH = true;
</script>
<script src="js/flash-websocket/web_socket.js"></script>
<script src="js/MaoSuiWebSocket.js"></script>
<script src="js/swfJs/interview.js"></script>
<script type="text/javascript">
    var Server;
    var interView = new InterView('liveMedia');
    log('连接中...', 'info');

    (function(){
        var uid = location.hash.substr(1);
        if(uid == 0 || uid == ""){
            uid = 3;
        }
        Server = new LiveServer("ws://"+location.hostname+":8080/live",{uid:uid,cid:701});
        Server.addEventListener({
            open: function() {
                this.sendEvent("init", {a:3})
            },
            init: function(e){
                //$('#queueText').html('你排队列中第' + e.queueIndex + "位");
                log( "连接成功. 你排第" + e.queueIndex + '位', 'success');
            },
            close: function( data ) {
                log( "已经断开.", 'danger');
            },
            init_success: function(data){
                log("初始化成功: " + new Date(data).toLocaleString());
            },
            liveInit: function(data){
                if(!data || !data.liveId)return;
                /*if(confirm("企业通知你面试,是否同意?")){
                    Server.sendEventToUser(0,'agent', uid);
                    interView.publish(uid);
                    interView.receive(data.liveId);
                }*/
                addMessage('企业通知你面试,是否<a href="javascript:Server.agent('+data.liveId+');">同意</a>?');
            },
            queue: function(queueIndex){
                log('排队更新,你排队列中第' + queueIndex + "位");
            },
            company_offline: function(){
                log("企业端已离线!",'danger');
            },
            company_online: function(){
                log("企业端已上线!",'success');
            },
            error: function(data){
                console.log('error', data)
                log(data)
            },
            hangUp: function(id) {
                interView.receiveStop();
                interView.hangUp();
                addMessage("对方已挂断!")
            },
            message: function(msg){
                addMessage(msg, 'left', 'primary');
            }
        });

        Server.agent = function(liveId){
            Server.sendEventToUser(0,'agent', uid);
            interView.publish(uid);
            interView.receive(liveId);
            addMessage("同意面试",'right')
        };

        Server.connect();
    })();


    interView.init = function(self){
        console.log("swf 加载成功");
    };
    //设备选择成功
    interView.equipOK = function(){
        //Server.connect();
    };

    interView.activeOff = function(){
        if(confirm("你确定要断开当前视频？")){
            interView.receiveStop();
            interView.hangUp();
            Server.sendEventToUser(0, 'hangUp', uid);//向企业发送挂断信息
        }
    };

    interView.__init('js/');

    // 将消息上屏
    function addMessage(msg, x, y){
        if(!y){
            y="success";
        }

        $('<p class="text-' + x + '">\
                   <span class="label label-' + y + '">' + msg + '</span>\
              </p>').appendTo('#logs');

        $log = $('#logs');
        $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
    }
    function log(msg, x){
        if(!x){
            x="success";
        }
        $('<div class="alert alert-' + x + '" role="alert">' + msg + '</div>').appendTo('#logs')
        $log = $('#logs');
        $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
    }
</script>
</body>
</html>
